<template>
      <div class="ac-guide">
         
           <div class="container">
                <!-- 3个背景球-->
                
                <div class="ball1"></div><div class="ball2"></div><div class="ball3"></div>
                  <!-- 3个背景球-->
                <div class="inner"> 
                    <h3 class="banner-title">{{Lang['guide']}}</h3>
                    <img class="close" src="@/svg/closebig.svg" width=20 height=20  @click="$router.push('/activity/subscription')" />
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <h5>{{Lang['step1']}}</h5>
                                <p>{{Lang['open wallet']}}</p>
                                <img src="./images/slider1.png" />
                            </div>
                            <div class="swiper-slide">
                                <h5>{{Lang['step2']}}</h5>
                                <p>{{Lang['use scan']}}</p>
                                <img src="./images/slider2.png" />
                            </div>
                            <div class="swiper-slide">
                                <h5>{{Lang['step3']}}</h5>
                                <p>{{Lang['entry item']}}<br /> {{Lang['other wallet']}}</p>
                                <img src="./images/slider3.png" style="margin-top:10px"/>
                            </div>
                            <div class="swiper-slide">
                                <h5>{{Lang['step4']}}</h5>
                                <p>{{Lang['success then']}}</p>
                                <img src="./images/slider4.png" />
                            </div>
                        </div>
                            
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                                    <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                    </div>
               </div>   
           </div>
      </div>
</template>
<script>
import Swiper from 'swiper'
export default {
    props: {
		lang: {
			type: Object,
		},
    },
    data(){
        return {
            Lang:{}
        }
    },
    mounted(){
        var headerSwiper = new Swiper('.swiper-container', {
                        loop: true,
                        grabCursor: true,
                        slidesPerView: "auto",
                        autoplay: true,
                        centeredSlides: !0,
                        watchSlidesProgress: !0,
                        pagination: ".swiper-pagination",
                        paginationClickable: !0,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        // 分页器
                        pagination: {
                            el: '.swiper-pagination',
                        }
                    });
            this.Lang=this.lang['subscription'];        
    }
}
</script>

<style lang="less">
@import './../../assets/css/swiper.min.css';


     .ac-guide{
        width:100%;
        text-align:center;
        padding-top:130px;
        padding-bottom:2px;
        background-image: linear-gradient(-180deg, #304599 2%, #0E1740 100%);
        .container{
            position: relative;
            width:1200px;
            height:750px;
            margin:0 auto 80px auto;
            border-radius: 20px;
            background:#fff;
            opacity: 1!important;
            color:#fff;
            font-family: 'NotoSansCJKsc-Regula';
            .ball1{
                width:525px;
                height:525px;
                position: absolute;
                top:-40px;
                right:-235px;
                background:url('./images/bg/1.png') no-repeat 50% 50%;
                z-index:0;
            }
            .ball2{
                width:154px;
                height:157px;
                position: absolute;
                top:300px;
                left:-110px;
                background:url('./images/bg/2.png') no-repeat 50% 50%;
                z-index:0;
            }
            .ball3{
                width:335px;
                height:78px;
                position: absolute;
                bottom:-82px;
                right:-150px;
                background:url('./images/bg/3.png') no-repeat;
            }
            .inner{
                 position: relative;
                 border-radius: 20px;
                 background:#fff;
                 width:100%;
                 height:100%;
                 .banner-title{
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    height:64px;
                    width:100%;
                    color:#333;
                    border-bottom:1px solid #d8d8d8;
                    font-size:16px;
                }
                .close{
                    position: absolute;
                    right:24px;
                    top:24px;
                    cursor: pointer;
                }
                .swiper-container{ //banner轮播
                    position: relative;
                    margin:40px auto;
                    height:600px;
                    .swiper-wrapper{
                        
                        .swiper-slide{
                            h5,p{
                                font-size:16px;
                                color:#333;
                                line-height:24px;
                            }
                            p{margin-top:16px;}
                            img{
                                margin-top:30px;
                                box-shadow: 0 2px 2px 2px rgba(129,129,129,0.25);
                            }
                        }
                        
                    }
                    .swiper-pagination{
                        width:100%;
                        height:20px;
                        position: absolute;
                        z-index: 999;                    
                    }
                    .swiper-pagination-bullet{
                        width:4px;
                        height:4px;
                        display: inline-block;
                        border-radius: 2px;
                        background-color: #99aeff;
                    }
                    .swiper-pagination-bullet-active{
                        width:16px;
                        background:#4864d2;
                    }
                    .swiper-button-prev{
                        width:48px;
                        height:48px;
                        background-image:url('/../../../svg/sliderleft.svg');
                        background-size: 48px 48px;
                        margin-left:70px;
                        top:266px;
                        &:hover{
                            background-image:url('/../../../svg/sliderchoosel.svg');
                        }
                    }
                    .swiper-button-next{
                        width:48px;
                        height:48px;
                        background-size: 48px 48px;
                        background-image:url('/../../../svg/sliderright.svg');
                        margin-right:70px;
                        top:266px;
                        &:hover{
                            background-image:url('/../../../svg/sliderchooser.svg');
                        }
                    }
                }
            }
           
           
        }
     }


</style>
